<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <link href="https://at.alicdn.com/t/font_2866320_i02r3rlrf7l.css" rel="stylesheet" type="text/css"/>
    <title>抽奖系统-成都信息工程大学</title>
</head>
<body>
<div class="container mt-3">
    <div class="innerBox">
        <div class="w-100 text-end">
            <span id="login_usr"></span>
            <a onclick="toSetting()" class="logoutText">系统设置</a>
            <a onclick="logout()" class="logoutText">退出登录</a>
        </div>
        <h4 class="text-center">抽奖系统-成都信息工程大学</h4>
        <div class="title-container my-3">
            <i class="iconfont icon-hangkonghangtian-aerospace-xingxing-hangxing"></i>
            <span class="title-name">幸运之星</span>
        </div>
        <div class="lottery">
            <h1 class="winner text-primary" id="winner">****</h1>
        </div>
        <div class="text-center mt-3 my-btns">
            <div class="my-btn" id="startLBtn" onclick="startLottery()">开始抽奖</div>
            <div class="my-btn" id="endLBtn">停止抽奖</div>
        </div>
        <div class="fra_list" th:fragment="fra_list">
            <div class="winners">
                <div class="title-container mt-3" th:if="${!winners.isEmpty()}">
                    <i class="iconfont icon-zhongjiangmingdan1"></i>
                    <span class="title-name">中奖名单</span>
                </div>
                <div class="winner-list">
                    <ul class="list-group">
                        <li class="list-group-item d-flex" th:each="winner,winnerState:${winners}">
                            <div class="list-left">
                                <span class="oid" th:text="${winnerState.count}"></span>
                                <span class="winnerId" th:text="${winner.stuNo}">1061</span>
                            </div>
                            <div class="list-right">
                                <span class="time" th:text="${#dates.format(winner.rdDate, 'yyyy-MM-dd HH:mm:ss')}">2020-08-09</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
<script>
    const sbtn = $('#startLBtn');
    const ebtn = $('#endLBtn');
    const winner = $('#winner');
    const minStuNo = [[${minStuNo}]];
    const maxStuNo = [[${maxStuNo}]];
    var winnerList = [];
    var onLotteryST;
    console.log(minStuNo);
    console.log(maxStuNo);
    isLogin();

    initWinners();
    // 初始化名单数组
    function initWinners() {
        for (let i = minStuNo; i <= maxStuNo; i++) {
            winnerList.push(i);
        }
        shuffle(winnerList);
        console.log("初始化数组完成", winnerList);
    }

    // 开始抽奖
    function startLottery() {
        console.log("点击了开始抽奖");
        sbtn.removeAttr('onclick');
        ebtn.attr('onclick', 'stopLottery();');
        sbtn.css('background', 'grey');
        ebtn.css('background', 'rgb(74, 74, 255)');
        onLottery();
    }

    //恢复抽奖
    function resumeLottery() {
        sbtn.css('background', 'rgb(74, 74, 255)');
        ebtn.css('background', 'grey');
        ebtn.removeAttr('onclick');
        sbtn.attr("onclick", "startLottery();");
    }

    // 抽奖中
    function onLottery() {
        console.log("抽奖中...");
        var i = 0;
        onLotteryST = setInterval(function () {
            winner.text(winnerList[i]);
            if (i < (maxStuNo - minStuNo)) {
                i++;
            } else {
                i = 0;
            }
        }, 80);
    }

    // 停止抽奖
    function stopLottery() {
        console.log("点击了停止抽奖");
        resumeLottery();
        clearInterval(onLotteryST);
        record();
    }

    // 保存抽奖记录
    function record() {
        let winnerId = winner.text();
        $.ajax({
            url: '/insert',
            method: 'post',
            data: {
                "stuNo": winnerId
            },
            success() {
                refreshPart();
                console.log("恭喜" + winnerId + "中奖");
            },
            error() {
                refreshPart();
                console.log("抽奖记录保存失败：", winnerId);
            }
        });
    }

    // 数据局部刷新
    function refreshPart() {
        $.ajax({
            url: '/refreshPart',
            method: 'GET',
            success(data) {
                $('.fra_list').html(data);
            }
        })
    }

    // 打乱顺序
    function shuffle(arr) {
        var l = arr.length;
        var index, temp;
        while (l > 0) {
            index = Math.floor(Math.random() * l);
            temp = arr[l - 1];
            arr[l - 1] = arr[index];
            arr[index] = temp;
            l--;
        }
    }

    // 转到设置
    function toSetting(){
        location.href='/setting/'
    }
    //判断登录状态
    function isLogin(){
        let item = sessionStorage.getItem("userInfo");
        if(item === null){
            location.href='/user/login';
        } else {
            $('#login_usr').text(item);
        }
    }
    // 退出登录
    function logout(){
        sessionStorage.clear();
        location.href='/user/login';
    }
</script>
</body>

</html>
